import React from "react";
import ReactDom from 'react-dom'

function Demo() {
    //state Hook
    const [count, setCount] = React.useState(0)
    const [name, setName] = React.useState('Tom')
    //useEffect相当于componentDidMount和componentDidUpdate,具体相当于谁看第二个传参
    //第二个参数写谁监听谁，写[]就谁也不监测-相当于componentDidMount，第二个参数不写就谁也不监测-相当于componentDidMount和componentDidUpdate
    // React.useEffect(()=>{
    //     console.log('@')
    // },[count])

    //effect Hook
    //useEffect的第一个参数返回值返回一个函数就相当于componentWillUnmount钩子
    React.useEffect(() => {
        let timer = setInterval(() => {
            setCount(count => count + 1)
        }, 1000)
        return () => {
            clearInterval(timer)
        }
    }, [])

    //ref Hook
    const myRef = React.useRef()

    function add() {
        // setCount(count+1)//第一种写法
        setCount(count => count + 1)
    }

    function changeName() {
        setName('Jack')
    }

    function unmount() {
        ReactDom.unmountComponentAtNode(document.getElementById('root'))
    }

    function show() {
        alert(myRef.current.value)
    }

    return <div>
        <input type="text" ref={myRef}/>
        <h2>当前求和为：{count}</h2>
        <h2>我的名字是：{name}</h2>
        <button onClick={add}>点我+1</button>
        <button onClick={changeName}>点我改名</button>
        <button onClick={unmount}>卸载组件</button>
        <button onClick={show}>点击展示输入</button>
    </div>
}

export default Demo